// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用vuex插件
Vue.use(Vuex)

// actions对象===响应组件中用户的动作
const actions = {
    // jia(context,value) {
    //     // console.log(context);
    //     console.log('actions中的jia被调用了');
    //     context.commit('JIA',value)
    // }
}
// mutations对象===修改state中的数据
const mutations = {
    JIA(state,value){
        console.log('mutation中的JIA被调用了');
        state.sum += value
    }
}
// state 对象 ===保存数据
const state = {
    sum:0
}

// getters === 将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 100
    }
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})


/* 
vuex的基本使用
    1.搭建vuex的环境
    2.初始化数据，配置store/index.js
        2.1 引入vue vuex 使用vuex
        2.2 配置actions,mutations,state
    3.组件中读取vuex 的数据 $store.state.sum
    4.组件中修改vuex的数据 
        $store.dispatch('actions中的方法名',数据)
        注意：如果传递的数据参数不需要网络请求，也可以省略dispatch，直接调用commit $store.commit('mutations中的方法名',数据)


getter
    当state的数据需要经过加工后在使用时，可以使用getters加工。
map方法（映射）
    mapState方法：用于映射state中的数据为计算数据
*/
